<template>
  <el-table border stripe :data="skuObj.records" style="margin: 10px 0px">
    <el-table-column label="序号" type="index" align="center" width="80">
    </el-table-column>
    <el-table-column label="名称" prop="skuName"> </el-table-column>
    <el-table-column label="描述" prop="skuDesc"> </el-table-column>
    <el-table-column label="默认图片">
      <template #="{ row, $index }">
        <img
          v-if="row.skuDefaultImg"
          :src="row.skuDefaultImg"
          alt=""
          style="width: 100px; height: 100px"
        />
        <img
          v-else
          src="./1.png"
          alt=""
          style="width: 100px; height: 100px; border-radius: 50%"
        />
      </template>
    </el-table-column>
    <el-table-column label="重量(千克)" prop="weight"> </el-table-column>
    <el-table-column label="价格(元)" prop="price"> </el-table-column>
    <el-table-column label="操作" width="250">
      <template #="{ row, $index }">
        <el-button
          :type="row.isSale == 0 ? 'success' : 'info'"
          :icon="row.isSale == 0 ? Top : Bottom"
          size="small"
          @click="changeSale(row)"></el-button>
        <el-button
          type="primary"
          size="small"
          :icon="Edit"
          @click="ElMessage({ type: 'warning', message: '开发中...' })"
        ></el-button>
        <el-button
          type="info"
          size="small"
          :icon="InfoFilled"
          @click="showSkuInfo(row)"
        ></el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="deleteSKU(row)"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页器 -->
  <el-pagination
    @current-change="getSkuList"
    @size-change="sizeHandler"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30]"
    layout="prev, pager, next, jumper,->,sizes,total"
    :total="skuObj.total"
    background
    :pager-count="7"
  >
  </el-pagination>

  <!-- 抽屉 
    v-model:控制抽屉显示与隐藏
  -->
  <el-drawer v-model="drawer">
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">名称:</el-col>
      <el-col :span="18">{{skuInfo.skuName}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">描述:</el-col>
      <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right;">价格:</el-col>
      <el-col :span="18">{{skuInfo.price}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px">平台属性:
      </el-col>
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="item in skuInfo.skuAttrValueList"
          :key="item.id"
          style="margin-left: 3px">{{ item.valueName }}</el-tag>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px"
        >销售属性:</el-col>
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="item in skuInfo.skuSaleAttrValueList"
          :key="item.id"
          style="margin-left: 3px"
          >{{ item.saleAttrValueName }}</el-tag>
      </el-col>
    </el-row>
    <el-row>
      <el-col>商品图片:</el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 轮播图 -->
        <el-carousel indicator-position="outside" style="height:400px">
          <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
           <img :src="item.imgUrl" alt="" style="width:100%;height:100%">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
//引入组合式API
import { ref, onMounted, reactive } from "vue";
//引入请求函数
import { reqSkuList,reqSkuInfo,reqDeleteSku } from "../../../api/product/sku/sku";
import {Delete,Edit,Top,Bottom,InfoFilled,} from "@element-plus/icons-vue";
//当前第几页
let currentPage = ref<number>(1);
//当前数据条数
let pageSize = ref<number>(10);
//存储服务器返回数据
let skuObj = reactive({});
//控制抽屉的显示与隐藏
let drawer = ref<boolean>(false);
//抽屉中详情
let skuInfo = ref([])

//组件挂载完毕获取一次SKU列表
onMounted(() => {
  getSkuList();
});
//封装获取SKU列表接口函数
const getSkuList = async (pager: number = 1) => {
  //修改参数
  currentPage.value = pager;
  let result = await reqSkuList(currentPage.value, pageSize.value);
  //存储服务器返回的数据
  Object.assign(skuObj, result);
};

//上架与下架按钮的回调
const changeSale = (row) => {
  //切换上架与下架按钮形态
  row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
  //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
};

const sizeHandler = () => {
  getSkuList();
};

//抽屉中信息获取
const showSkuInfo = async(row)=>{
  drawer.value = true;
  let result = await reqSkuInfo(row.id)
  skuInfo.value = result
  console.log(skuInfo)
}

//删除SKU
const deleteSKU =  async(row)=>{
  try {
    await reqDeleteSku(row.id)
    //获取最新列表
    getSkuList();
  } catch (error) {
    
  }
}
</script>

<style scoped>
/**深度选择器:能干什么  深度选择器有哪些  什么情况下使用**/
/**  >>>  /deep/ ::v-deep   回来咱们会花1一个小时讲解它***/
>>>.el-carousel__button{
    width:10px;
    height: 10px;
    background:hotpink;
    border-radius: 50%;
 }
</style>